<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<script type="text/javascript">
			 $(document).ready(function(){
			 	var eid=window.sessionStorage.getItem("eid");
			 	var user=JSON.parse(window.sessionStorage.getItem("user"));
				var userid="";
				if(eid==null){
					window.location="/ExperiecneCotroller/getAllExperience";
				}
			 	if(user==null){
					userid=0;
			 	}else{
			 		userid=user.userid;
			 	}
			 	var data1={"eid":eid,"userid":userid};
			 	console.log(data1);
				 // $.ajax({
					//  // url: "https://www.wang666runfeng.cn/mjh132/NewController/getNew",
					//  url: "http://127.0.0.1:8080/ExperiecneCotroller/getExperienceByEid",
					//  type: "POST",
					//  data: {"eid": eid, "userid": userid},
					//  dataType: "json",
					//  success: function (data) {
					//  	console.log(data);
					//  }
				 // });
				$.post("/ExperiecneCotroller/getExperienceByEid",data1, function (data) {
					console.log(data);
					var oData = eval(data);
					var loginuserid=userid;
					var euserid=oData[0].userid;
					window.sessionStorage.setItem("euserid",euserid);
					console.log(loginuserid);
					console.log(euserid);
					var userhead ="<img src='"+oData[0].userhead+"' width='100%' style='border-radius:100%;'/>";
					var id_time ="<h1>"+oData[0].name+"</h1><p>"+oData[0].createtime+"</p>";
					if (loginuserid==euserid){
						var Edelete = "<img src='http://localhost:8080/image/delete.png' width='100%' onclick='deleteEx();'/>";
						$("#Edelete").html(Edelete);
					}
					var eContent="<p>"+oData[0].eContent+"</p>"
					if(oData[0].eImage!=null||oData[0].eImage!=""){
						var eImage="<img src='"+oData[0].eImage+"' width='100%'/>"
						$("#eImage").html(eImage);
					}
					var comment_points="<span class='iconfont icon-pinglun'>"+oData[0].comment_points
					var praise_flag=oData[0].praise_flag;
					var praise_point = "";
					if(praise_flag){
						praise_points="<a onclick='dianzan()' style='text-decoration:none;'><span id='praise' class='iconfont icon-dianzan2'>"+oData[0].praise_points+"</span></a>";
						window.sessionStorage.setItem("praiseflag","yes");
					}else{
						praise_points="<a onclick='dianzan()' style='text-decoration:none;'><span id='praise' class='iconfont icon-dianzan'>"+oData[0].praise_points+"</span></a>";
						window.sessionStorage.setItem("praiseflag","no");
					}
					$("#userhead").html(userhead);
					$("#id_time").html(id_time);
					$("#eContent").html(eContent);
					$("#comment_points").html(comment_points);
					$("#praise_points").html(praise_points);
					$("#lv1").trigger("create").listview("refresh");
				});
				var data2={"eid":eid};
				$.post("/CommentController/getAllCommentByEid",data2, function (data) {
					console.log(data);
					var oData = eval(data);
					var markup ='';
					$.each(oData,function(i){
					markup += "<li><div class='ui-grid-b'><div class='ui-block-a'><div class='ui-bar ui-bar-c' >";
					markup += "<img src='"+oData[i].userhead+"' width='100%' /> ";
					markup += "</div></div>";
					markup += "<div class='ui-block-b'><div class='ui-bar ui-bar-c'>";
					markup += "<h1>"+oData[i].name+"</h1>";
					markup += "<p>"+oData[i].cCreatetime+"</p>";
					markup += "</div></div>";
					markup += "<div class='ui-block-c'><div class='ui-bar ui-bar-c'>";
					if(userid==oData[i].userid){
						markup += "<img src='http://localhost:8080/image/delete.png' width='100%' onclick='deleteCom("+oData[i].cid+");'/>";
					}
					markup += "</div></div></div>";
					markup += "<div class='ui-grid-a'> <div class='ui-block-a'><div class='ui-bar ui-bar-c'></div></div>";
					markup += "<div class='ui-block-b'><div class='ui-bar ui-bar-c'>";
					markup += "<p>"+oData[i].cContent+"</p>";
					markup += "</div></div></div>";
					markup += "</li>";
					});
					$("#lv3").html(markup);
					$("#lv3").listview("refresh");
				});
			});
		</script>
		<script>
			function addComment(){
				var user=JSON.parse(sessionStorage.getItem("user"));
				var userid="";
				var eid=sessionStorage.getItem("eid");
				var cContent=$("#comContent").val();
				console.log(userid);
				console.log(eid);
				if(user==null){
					$("#pleaseLogin").popup('open');
				}else if(cContent==null|cContent==""){
					$("#nullCom").popup('open');
				}else{
					userid=user.userid
					var data1={"userid" : userid , "eid" : eid , "cContent" :cContent};
					$.post("/CommentController/addComment",data1, function (data) {
						if(data = "success"){
							console.log("评论成功");
							window.location.reload();
							$("#comContent").val("");
						}else{
							console.log("评论失败");
						}
					});
				}
			}
			function closePup(){
				$("#pleaseLogin").popup('close');
			}
			function toLogin(){
				window.location = "/ViewController/toLogin";
			}
			function dianzan(flag){
				var praiseflag=sessionStorage.getItem("praiseflag");
				var user=JSON.parse(sessionStorage.getItem("user"));
				var userid="";
				var eid=sessionStorage.getItem("eid");
				if(user==null){
					$("#pleaseLogin").popup('open');
				}else if(praiseflag!="yes"){
					userid=user.userid;
					var data={"userid" : userid , "eid" : eid };
					$.post("/PraiseController/addPraise",data, function (result) {
						if(result = "success"){
							console.log("点赞成功");
							window.location.reload();
						}else{
							console.log("点赞失败");
						}
					});
					$("#praise").removeClass("iconfont icon-dianzan");
					$("#praise").addClass("iconfont icon-dianzan2");
					sessionStorage.setItem("praiseflag","yes");
					
				}else if(praiseflag!="no"){
					userid=user.userid;
					var data={"userid" : userid , "eid" : eid };
					$.post("/PraiseController/deletePraise",data, function (result) {
						if(result = "success"){
							console.log("取消成功");
							window.location.reload();
						}else{
							console.log("取消失败");
						}
					});
				$("#praise").removeClass("iconfont icon-dianzan2");
				$("#praise").addClass("iconfont icon-dianzan");
				sessionStorage.setItem("praiseflag","no");
				}
			}
			function deleteEx(){
				var eid=sessionStorage.getItem("eid");
				var data={"eid" : eid };
				$.post("/ExperiecneCotroller/deleteEx",data, function (result) {
					if(result = "success"){
						console.log("删除成功");
						window.location = "/ExperiecneCotroller/getAllExperience";
					}else{
						console.log("删除失败");
					}
				});
			}
			function clickUser(){
				var euserid=sessionStorage.getItem("euserid");
				var user=JSON.parse(sessionStorage.getItem("user"));
				var userid="";
				if(user==null){
					$("#pleaseLogin").popup('open');
				}else{
					userid=user.userid;
					if(userid==euserid){
						window.location = "/ViewController/toMy";
					}else{
						window.location = "/ViewController/toPartnerPage";
					}
				}
				
				
			}
			function deleteCom(cid){

				var eid=sessionStorage.getItem("eid");
				console.log(cid);
				console.log(eid);
				var data={"eid" : eid , "cid" :cid };
				$.post("/CommentController/deleteCom",data, function (result) {
					if(result = "success"){
						console.log("删除成功");
						window.location.reload();
					}else{
						console.log("删除失败");
					}
				});
			}
		</script>
		<style>
			.lv1 .ui-grid-b .ui-block-a{
				width: 25%;
			}
			.lv1 .ui-grid-b .ui-block-b{
				width: 58%;
			}
			.lv1 .ui-grid-b .ui-block-c{
				width: 17%;
				
				
			}
			.ui-grid-solo .ui-block-a p{
				width: 100% !important;
				float: left !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				white-space: normal !important;
			}
			.lv3 .ui-grid-a .ui-block-b p{
				width: 100% !important;
				float: left !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				white-space: normal !important;
			}
			.ui-grid-solo .ui-block-a img{
				max-width:250px;
			}
			.lv3 .ui-grid-b .ui-block-a{
				width: 25%;
			}
			.lv3 .ui-grid-b .ui-block-b{
				width: 60%;
			}
			.lv3 .ui-grid-b .ui-block-c{
				width: 15%;
			}
			.lv3 .ui-grid-a .ui-block-a{
				width: 25%;
			}
			.lv3 .ui-grid-a .ui-block-b{
				width: 75%;
			}
			/* .comment_div{
			  position: fixed;
			  bottom: 0;
			  width: 100%;
			  z-index:10000;
			}
			
			.comment_div .ui-block-a{
			  width: 83%;
			}
			.comment_div .ui-block-b{
			  width: 10%;
			  transform:translateY(100%);
			} */
			.addCom{
				padding: 0px 2.5% ;
			}
			.addCom .ui-block-a{
				width: 80%;
			}
			.addCom .ui-block-b{
				width: 10%;
			}
			
		</style>
	</head>
	<body>
		<div data-role = "page">
			<div data-role = "header"  data-fullscreen = "true" >
				<a href="/ExperiecneCotroller/getAllExperience" data-icon = "back"  data-ajax = "false">首页</a>
				<h1>正文</h1>
				
			</div>
			<div data-role = "content" class="content1" id="content1">
				<ul data-role = "listview" class="lv1" id="lv1" style="margin-bottom:30px;">
					<li>
					<div class="ui-grid-b">
						<div th:onclick="clickUser()">
						<div class="ui-block-a">
							<div class="ui-bar ui-bar-c" id="userhead">
								
							</div>
						</div>
						<div class="ui-block-b">
							<div class="ui-bar ui-bar-c" id="id_time">
								<!-- <h1>132</h1>
								<p>时间</p> -->
							</div>
						</div>
						</div>
						<div class="ui-block-c">
							<div class="ui-bar ui-bar-c" id="Edelete">
								<!-- <h1>132</h1>
								<p>时间</p> -->
							</div>
						</div>
					</div>
					<div class="ui-grid-solo">
						<div class="ui-block-a">
							<div class="ui-bar ui-bar-c" id="eContent">
							<!-- <p>这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容</p> -->
							</div>
						</div>
					</div>
					<div class="ui-grid-solo" id="eImage">
						 <!-- <div class="ui-block-a">
							<div class="ui-bar ui-bar-c" >
							<img src="image/20155516431932.jpg" /> 
							</div>
						</div> -->
					</div>
					</li>
				</ul>
				
				<ul data-role = "listview" class="lv2" id="lv2" style="margin-bottom:10px;">
					<li>
						<div class="ui-grid-c">
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c" id="comment_points">
									<!-- 评论 1 -->
								</div>
							</div>
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									
								</div>
							</div>
							<div class="ui-block-c">
								<div class="ui-bar ui-bar-c">
									
								</div>
							</div>
							<div class="ui-block-d">
								<div class="ui-bar ui-bar-c" id="praise_points">
									<!-- 评论 1 -->
								</div>
							</div>
						</div>
					</li>
				</ul>
					<ul data-role = "listview" class="lv3" id="lv3" style="margin-bottom:30px;">
<!--						<div th:each="Coms,stat:${listCom}">-->
<!--					<li >-->
<!--						<div class="ui-grid-a">-->
<!--							<div class="ui-block-a">-->
<!--								<div class="ui-bar ui-bar-c" >-->
<!--									 <img th:src="${Coms.userHead}" width="100%" />-->
<!--								</div>-->
<!--							</div>-->
<!--							<div class="ui-block-b">-->
<!--								<div class="ui-bar ui-bar-c">-->
<!--									<h1 th:text="${Coms.name}"></h1>-->
<!--									<p th:text="${Coms.cCreatetime}"}>时间</p>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--						<div class="ui-grid-a">-->
<!--							<div class="ui-block-a">-->
<!--								<div class="ui-bar ui-bar-c">-->
<!--								</div>-->
<!--							</div>-->
<!--							<div class="ui-block-b">-->
<!--								<div class="ui-bar ui-bar-c">-->
<!--								<p th:text="${Coms.cContent}"></p>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--						-->
<!--					</li>-->
<!--						</div>-->
				</ul>
				
				
			</div>
			<!-- <div id="addC" class="comment_div">
				<div class="ui-grid-a">
				<div class="ui-block-a">
				<input type="text" name="addComment" id="add_btn" style="border-radius: 6px;">
				</div>
				<div class="ui-block-b">
					<a href="" onclick=""  style="">发布</a>
				</div>
				</div>
			</div> -->
			<div data-role = "popup" id="pleaseLogin" data-position-to = "window">
				<div style="padding: 10px;">
					<h3>您尚未登录，请先登录</h3>
				<div class="ui-grid-a">
					<div class="ui-block-a">
						<a data-role = "button" onclick="toLogin()">登录</a>
					</div>
					<div class="ui-block-b">
						<a data-role = "button" onclick="closePup()">取消</a>
					</div>
				</div>
				</div>
			</div>
			<div data-role = "popup" id="nullCom">
				<p>您不能发送空的评论</p>
			</div>
			<div data-role = "footer" data-position = "fixed" data-tap-toggle="false" class="addCom">
				<div class="ui-grid-a" >
					<div class="ui-block-a">
						<input type="text" id="comContent" name="comContent">
					</div>
					<div class="ui-block-b">
						<a data-role = "button" onclick="addComment()">发送</a>
					</div>
					
				
			</div>
		</div>
		</div>
	</body>
</html>
